// 一个工具类函数文件

/*
    1.获取、设置元素的 CSS 样式

    @param {ele}   要获取或设置的元素名
    @param {attr}  要获取或设置的属性名
    @param {value} 设置 属性值（可选）
    @return        获取到的元素的CSS属性值
*/
function getCss(ele, attr, value){
    // 判断是否传了value值
    if(!value){
        // 兼容写法
        return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr]
    }
    ele.style[attr] = value
}

/*
    2.动画函数

    @param {ele}      要执行的动画元素名
    @param {options}  是一个对象, 包含了ele所有属性
    @param {duration} 动画执行的时间
    @param {fn}       动画执行完毕的回调函数
*/
function animate(ele, options, duration, fn){
    // 先清除定时器, 保证一次只调用了一个定时器
    clearInterval(ele.timer);
    // 声明两个空对象
    const start = {};
    const range = {};
    // 遍历 传进来的options（ele元素的所有属性）
    for(let key in options){
        // 调用getCss函数获取属性值，并赋值给start对象
        start[key] = parseFloat(getCss(ele, key));
        range[key] = options[key] - start[key]
    }
    
    // 获取当前的时间戳
    const startTime = new Date().getTime();
    ele.timer = setInterval(() => {

        // 获取指定时间内运动的时间
        const timeDiffrence = Math.min((new Date().getTime() - startTime),duration)

        for(let attr in options){
            let res = start[attr] + range[attr] / duration * timeDiffrence;
            // 判断attr 是不是透明
            res = attr === 'opacity' ? res : res + 'px';
            ele. style[attr] = res;
        }
        // 判断当运动的时间大于等于传入的时间时，清除定时器
        if(timeDiffrence >= duration){
            clearInterval(ele.timer);
            fn && fn()
        }
    },10)

}

/*
    3-1.淡入动画
    @param {ele}      要执行动画的元素
    @param {duration} 淡入动画执行的时间
    @param {fn}       回调函数
*/
function fadeIn(ele, duration, fn){
    getCss(ele, 'display', 'block');
    getCss(ele, 'opacity', '0');
    animate(ele, {opacity : 1}, duration, fn)
}

/*
    3-2.淡出动画
    @param {ele}      要执行动画的元素
    @param {duration} 淡出动画执行的时间
    @param {fn}       回调函数
*/
function fadeOut(ele, duration, fn){
    getCss(ele, 'display', 'block');
    getCss(ele, 'opacity', '0');
    animate(ele, {opacity : 0}, duration, fn)
}